<template>
  <div class="club-bottom-component">
    <div class="recent-activities">
      <span class="activity-title">最近活动</span>
      <span class="activity-count">({{ activities.length }}个)</span>
    </div>

    <div class="activities-list-container">

      <el-scrollbar :v-loading="isLoading">
        <div class="activities-list">
          <el-timeline>
            <el-timeline-item center v-for="(activity, index) in activities" :key="index" :type="success">
              <div class="activity-item" @click="showActivityDetails(activity)">
                <i class="activity-icon el-icon-chat-line-round"></i>
                <div class="activity-details">
                  <h3 class="activity-name">{{ activity.activityName }}</h3>
                  <span class="activity-time">{{ activity.publishTime }}</span>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-scrollbar>

    </div>

    <el-dialog v-model="dialogVisible" title="活动详情" width="50%" :before-close="handleClose" center align-center>
      <el-scrollbar>
        <div v-if="selectedActivity">
          <h2>{{ selectedActivity.activityName }}</h2>
          <p><strong>发布时间:</strong> {{ selectedActivity.publishTime }}</p>
          <p><strong>结束时间:</strong> {{ selectedActivity.endTime }}</p>
          <p><strong>活动内容:</strong> {{ selectedActivity.activityDescription.content }}</p>
          <div
            v-if="selectedActivity.activityDescription.fileUrlList && selectedActivity.activityDescription.fileUrlList.length">

            <div class="activity-images">
              <img v-for="(fileUrl, index) in selectedActivity.activityDescription.fileUrlList" :key="index"
                :src="fileUrl" class="activity-image" />
            </div>
          </div>
        </div>
      </el-scrollbar>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false;showButton=false;">关闭</el-button>
          <el-button type="danger" v-if="showButton" @click="openDelete(selectedActivity?.activityId)">删除</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

</template>
<script>
import { ElIcon, ElDialog, ElButton,ElScrollbar, ElMessageBox, ElMessage, ElLoading } from 'element-plus';
import axios from 'axios';

export default {
  name: 'ClubBottomComponent',
  props: {
    club: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      activities: [],
      dialogVisible: false,
      selectedActivity: null,
      showButton:false,
      isLoading:true
    };
  },
  created() {
    this.getActivities();
  },
  methods: {
    showDeleteButton(activityId){
      const token=sessionStorage.getItem("token");
      if(token!==null&&token!==""){
        axios.get("/activity/activityEditPower",{params:{activityId:activityId}})
        .then((response)=>{
          if (response.data.data) {
            this.showButton = response.data.data
          } else {
            this.showButton = false;
          }
        })
        .catch((error)=>{
          console.log(error);
        })
      }
    },
    async getActivities() {
      let params = {
        clubId: this.club.clubId,
        pageNum: 1,
        pageSize: 5,
      };
      try {
        const response = await axios.get('/activity/ActivityList', { params });
        if (response.data.code === 0) {
          this.activities = response.data.data.records;
        } else {
          console.error('Failed to fetch activities:', response.data.message);
        }

        this.isLoading=false;
      } catch (error) {
        console.error('Error fetching activities:', error);
        this.isLoading=false;
      }
    },
    async showActivityDetails(activity) {
      this.showDeleteButton(activity.activityId);
      try {

        const response = await axios.get(`/activity/activityInfo`, {
          params: {
            activityId: activity.activityId,
          },
        });
        if (response.data.code === 0) {
          const activityDetails = response.data.data;
          activityDetails.activityDescription = JSON.parse(activityDetails.activityDescription);
          this.selectedActivity = activityDetails;
          this.dialogVisible = true;
        } else {
          this.$message.error(response.data.message);
        }
      } catch (error) {
        console.error("Error fetching activity details:", error);
        this.$message.error("无法获取活动详情");
      }
    },
    handleClose(done) {
      this.selectedActivity = null;
      this.showButton=false
      done();
    },
    openDelete(activityId){
      ElMessageBox.confirm(
        '你确认删除活动吗?',
        {
          confirmButtonText: 'YES',
          cancelButtonText: 'NO',
          center: true,
          roundButton: true
        }
      )
        .then(() => {

          this.deleteActivity(activityId);
        })
        .catch(() => {

        })
    },
    deleteActivity(activityId){

      const isLoading=ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      axios.post("/activity/deleteActivity",null,{params:{
        activityId:activityId
      }}).then((response)=>{
        if(response.data.code===0){
          ElMessage({
            message:"删除活动成功",
            showClose:true,
            type: 'success',
          })
        } else{
          ElMessage({
            message: response.data.message,
            showClose: true,
            type: 'error',
          })
        }

        this.dialogVisible = false;
        this.selectedActivity = null;
        this.showButton = false;

        isLoading.close()
        this.getActivities();
      })
      .catch((error)=>{
        console.log(error);
        isLoading.close()
      })
    }
  },
  components: {
    ElIcon,
    ElDialog,
    ElButton,
    ElScrollbar
  }
}
</script>

<style scoped>
.club-bottom-component {
  background-color: #f7f8fa;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  height: 90%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止整体滚动 */
}

.recent-activities {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.activity-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.activity-count {
  font-size: 16px;
  color: #666;
}

.activities-list-container {
  flex-grow: 1;
  overflow: hidden;
}

.activities-list {
  height: 100%;
  overflow-y: auto; /* 允许内容垂直滚动 */
  padding-right: 10px; /* 为滚动条留出空间 */
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.activity-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.activity-icon {
  margin-right: 15px;
  color: #5b9bd5;
  font-size: 24px;
}

.activity-details {
  flex-grow: 1;
}

.activity-name {
  font-size: 16px;
  color: #444;
  margin-bottom: 5px;
}

.activity-time {
  font-size: 14px;
  color: #999;
}

.activity-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.activity-image {
  max-width: 25%;
  height: auto;
  border-radius: 5px;
}

/* 自定义滚动条样式 */
.activities-list::-webkit-scrollbar {
  width: 6px;
}

.activities-list::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}

.activities-list::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

/* 移除 el-scrollbar，使用原生滚动 */
.el-timeline {
  padding-right: 10px;
}
</style>
